<template>
  <array-com
    :pop-width="800"
    :get-add-data-fun="getAddDataFunc"
    @addClick="initAddData"
    @edit-click="editClick"
  >
    <template slot="add">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="form.age"></el-input>
        </el-form-item>
      </el-form>
      可以自己定义自己的from表单数数据
    </template>
    <template>
      自定义数组只需要，写自己添加的弹窗数据，也可以完全自定义
    </template>
  </array-com>
</template>

<script lang="ts">
  import ArrayCom from '@/components/data/array/index.vue'
  import { Vue, Component } from 'vue-property-decorator'
  import DataModel from "@/models/DataModel";

  @Component({
    components: {
      ArrayCom,
    }
  })
  export default class JSONDataModel extends Vue {

    form = {
      name: '',
      age: 0
    }

    initAddData(data?: string) {
      this.form = {
        name: '',
        age: 0
      }
    }

    editClick(model: DataModel) {
      Object.assign(this.form, JSON.parse(model.data))
    }

    getAddDataFunc() {
      return this.form
    }
  }

</script>

<style lang="scss">

</style>
